<template>
  <view class="box" @click="external">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click.stop="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      出租房
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text
        @click="fanhui"
        style="position: absolute; left: 50%; transform: translateX(-50%)"
        >出租房</text
      >
      <!-- #endif -->
      <image
        @click.stop="sousuo"
        class="image2"
        src="https://pic.bangbangtongcheng.com/static/sousuo.png"
        mode="widthFix"
      />
    </view>
    <view
      class="tit_list"
      :style="'height: calc(100vh - 88rpx - ' + statusBarHeight1 + 'px);'"
    >
      <view class="tit">
        <view :class="userType == '' ? 'xuan view' : 'view'" @click.stop="xuanzhong('')"
          >全部</view
        >
        <view :class="userType == '2' ? 'xuan view' : 'view'" @click.stop="xuanzhong(2)"
          >个人</view
        >
        <view :class="userType == '1' ? 'xuan view' : 'view'" @click.stop="xuanzhong(1)"
          >经纪人</view
        >
        <view class="sai" @click.stop="showModal" data-target="DrawerModalR">
          筛选
          <span>▼</span>
        </view>
      </view>
      <scroll-view
        class="scroll-view"
        :scroll-y="modalName == '' || modalName == null"
        @scrolltolower="down"
        :scroll-top="scrollTop1"
        @scroll="scroll"
        refresher-background="#f5f5f5"
      >
        <view
          class="li"
          v-for="(item, index) in Recommend"
          :key="index"
          @click.stop="details(item.id)"
        >
          <image
            mode="aspectFit"
            :src="item.display_diagram ? item.display_diagram : imgUrl + item.house_image"
          />
          <view class="li_1">
            <view class="tits">{{ item.title }}</view>
            <view class="neirong_1">
              <view class="neir_css">{{ item.region }}</view>
              <view class="neir_css">{{ item.cell_name || "" }}</view>
            </view>
            <view class="neirong_1">
              <view class="neir_css">{{
                item.FLOOR
                  ? item.FLOOR.split("|")[0] + "层/共" + item.FLOOR.split("|")[1] + "层"
                  : ""
              }}</view>
              <view class="neir_css">{{ item.house_type || "" }}</view>
            </view>
            <view class="neirong_1">
              <view class="price neir_css" v-if="item.transaction_type == 2"
                >{{ item.price }}万</view
              >
              <view
                class="price neir_css"
                v-if="item.transaction_type == 1 && item.price <= 10000"
                >{{ item.price }}元</view
              >
              <view
                class="price neir_css"
                v-if="item.transaction_type == 1 && item.price > 10000"
                >{{ item.price / 10000 }}万元</view
              >
              <view class="neir_css" style>{{ item.AREA || item.area }}㎡</view>
            </view>
          </view>
        </view>
        <view v-if="Recommend.length == 0" class="none">
          <image
            src="https://pic.bangbangtongcheng.com/static/none.png"
            mode="widthFix"
          />
          <view>没有更多数据了</view>
        </view>
        <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
      </scroll-view>
    </view>
    <view
      class="cu-modal drawer-modal justify-end"
      :class="modalName == 'DrawerModalR' ? 'show' : ''"
    >
      <scroll-view scroll-y="true" class="pop-scroll">
        <view
          class="tittit"
          :style="[
            {
              top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
            },
          ]"
        >
          <view @click="hideModal()">×</view>筛选
        </view>
        <view
          class="cu-dialog basis-lg"
          @tap.stop
          :style="[
            {
              top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
              height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',
            },
          ]"
        >
          <view class="cu-list menu text-left">
            <view style="height: 80rpx">
              <!-- <view @click="hideModal()">×</view>筛选 -->
            </view>
            <view class="leibie">
              类别
              <span style="color: #999999">（请选择类别）</span>
              <view class="list">
                <view
                  @click.stop="type1Click(index)"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type1"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="quyu">
              户型
              <span style="color: #999999">（请选择户型）</span>
              <view class="list">
                <view
                  @click.stop="type3Click(index)"
                  class="li"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type3"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="quyu">
              区域
              <span style="color: #999999">（请选择区域）</span>
              <view class="list">
                <view
                  @click.stop="type7Click(index)"
                  class="li"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type7"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="jiage">
              租金
              <span style="color: #999999">（请选择租金）</span>
              <view class="list">
                <view
                  @click.stop="type8Click(index)"
                  class="li"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type8"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="mianji">
              面积
              <span style="color: #999999">（请选择面积）</span>
              <view class="list">
                <view
                  @click="type9Click(index)"
                  class="li"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type9"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="loucen">
              楼层
              <span style="color: #999999">（请选择楼层）</span>
              <view class="list">
                <view
                  @click.stop="type10Click(index)"
                  class="li"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type10"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
          </view>
        </view>
        <view class="di">
          <view class="div l" @click.stop="cz">重置</view>
          <view class="div r" @click.stop="sx">确定</view>
        </view>
      </scroll-view>
    </view>
    <view v-if="scrollTop > 0" class="hui" @click="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
    <uniBall></uniBall>
    <!-- <view-tabbar :selected="0"></view-tabbar> -->
  </view>
</template>

<script>
import { mapGetters } from "vuex";
//#ifdef H5
import wxshare from "../../utils/index.js";
//#endif
import Tabbar from "@/components/tabbar.vue";
export default {
  data() {
    return {
      xuan: 1,
      modalName: "",
      leibieLiat: [1],
      pageSize: 10,
      pageNo: 1,
      Recommend: [],
      imgUrl: this.$imgSrc,
      showType: false,
      orderSort: "1",
      scrollTop: "0",
      trigger: false,
      downStatus: true,
      upStatus: true,
      userType: "",
      scrollTop1: "0",
      type1: [],
      type3: [],
      type7: [],
      type8: [],
      type9: [],
      type10: [],
      houseType: "",
      type: "",
      region: "",
      price: "",
      area: "",
      floor: "",
      CustomBar1: "",
      user: uni.getStorageSync("Pduser"),
    };
  },
  components: {
    "view-tabbar": Tabbar,
  },
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  async onPullDownRefresh() {
    this.Recommend = [];
    this.pageNo = 1;
    this.downStatus = true;
    if (this.upStatus) {
      this.trigger = true;
      await this.getRecommend();
    }
  },
  onLoad(options) {
    this.getType();
    this.getRecommend();
    this.CustomBar1 = this.CustomBar;
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
  },
  onPageScroll: function (Object) {
    // console.log(Object.scrollTop); //实时获取到滚动的值
    this.scrollTop = Object.scrollTop;
  },
  methods: {
    xuanzhong(num) {
      // this.xuan = num;
      this.userType = num;
      this.Recommend = [];
      this.pageNo = 1;
      this.downStatus = true;
      // this.getRecommend();
      this.cz();
    },
    totop() {
      this.scrollTop1 = this.oldScrollTop;
      this.$nextTick(() => {
        this.scrollTop1 = 0;
      });
    },
    scroll(e) {
      this.oldScrollTop = e.detail.scrollTop;
      this.scrollTop = e.detail.scrollTop;
    },
    cz() {
      // console.log(123);
      this.type1.forEach((el) => {
        el.active = false;
      });
      this.type3.forEach((el) => {
        el.active = false;
      });
      this.type7.forEach((el) => {
        el.active = false;
      });
      this.type8.forEach((el) => {
        el.active = false;
      });
      this.type9.forEach((el) => {
        el.active = false;
      });
      this.type10.forEach((el) => {
        el.active = false;
      });
      this.houseType = "";
      this.type = "";
      this.region = "";
      this.price = "";
      this.area = "";
      this.floor = "";
      this.Recommend = [];
      this.pageNo = 1;
      this.downStatus = true;
      this.getRecommend();
    },
    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param,
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
    sx() {
      let that = this;
      this.type = "";
      this.houseType = "";
      this.region = "";
      this.price = "";
      this.area = "";
      this.floor = "";
      this.type1.forEach((el) => {
        if (el.active == true) {
          that.type = el.valueNum;
        }
      });
      this.type7.forEach((el) => {
        if (el.active == true) {
          that.region = el.valueName;
        }
      });
      this.type3.forEach((el) => {
        if (el.active == true) {
          that.houseType = el.valueName;
        }
      });
      this.type8.forEach((el) => {
        if (el.active == true) {
          that.price = el.valueName;
        }
      });
      this.type9.forEach((el) => {
        if (el.active == true) {
          that.area = el.valueName;
        }
      });
      this.type10.forEach((el) => {
        if (el.active == true) {
          that.floor = el.valueNum;
        }
      });
      this.Recommend = [];
      this.pageNo = 1;
      this.downStatus = true;
      this.modalName = null;
      this.getRecommend();
    },
    type1Click(index) {
      let that = this;
      this.type1.forEach((el, index1) => {
        if (index == index1) {
          that.$set(that.type1[index1], "active", !el.active);
        } else {
          that.type1[index1].active = false;
        }
      });
    },
    type7Click(index) {
      let that = this;
      this.type7.forEach((el, index1) => {
        if (index == index1) {
          that.$set(that.type7[index1], "active", !el.active);
        } else {
          that.type7[index1].active = false;
        }
      });
    },
    type3Click(index) {
      let that = this;
      this.type3.forEach((el, index1) => {
        if (index == index1) {
          that.$set(that.type3[index1], "active", !el.active);
        } else {
          that.type3[index1].active = false;
        }
      });
    },
    type8Click(index) {
      let that = this;
      this.type8.forEach((el, index1) => {
        if (index == index1) {
          that.$set(that.type8[index1], "active", !el.active);
        } else {
          that.type8[index1].active = false;
        }
      });
    },
    type9Click(index) {
      let that = this;
      this.type9.forEach((el, index1) => {
        if (index == index1) {
          that.$set(that.type9[index1], "active", !el.active);
        } else {
          that.type9[index1].active = false;
        }
      });
    },
    type10Click(index) {
      let that = this;
      this.type10.forEach((el, index1) => {
        if (index == index1) {
          that.$set(that.type10[index1], "active", !el.active);
        } else {
          that.type10[index1].active = false;
        }
      });
    },
    getType() {
      let that = this;
      this.$myRequest
        .get("/mob/home/getDictionaries", {
          pageNo: 1,
          pageSize: 10,
          type: "9,7,12,1,3,10",
        })
        .then((res) => {
          console.log(res);
          res.list.forEach((el) => {
            el.active = false;
            if (el.type == 1) {
              that.type1.push(el);
            } else if (el.type == 7) {
              that.type7.push(el);
            } else if (el.type == 12) {
              that.type8.push(el);
            } else if (el.type == 3) {
              that.type3.push(el);
            } else if (el.type == 9) {
              that.type9.push(el);
            } else if (el.type == 10) {
              that.type10.push(el);
            }
          });
          // this.list = this.list.concat(res.list);
        });
    },
    sousuo() {
      // if (!this.userinfo.phone) {
      //   uni.showToast({
      //     title: "请登录",
      //     icon: "none",
      //     mask: true
      //   });
      //   return;
      // }
      uni.navigateTo({
        url: "/pages_houses/housing/oldHouseSearch?searchlogType=1&type=3",
      });
    },
    details(id) {
      uni.navigateTo({
        url: "/pages_houses/housing/used/houseDetails?id=" + id,
      });
    },
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target;
    },
    guan() {
      this.zbc = false;
    },
    down() {
      if (this.downStatus) {
        this.pageNo++;
        this.getRecommend();
      }
    },
    async up() {
      this.Recommend = [];
      this.pageNo = 1;
      this.downStatus = true;
      if (this.upStatus) {
        this.trigger = true;
        await this.getRecommend();
      }
    },
    getRecommend() {
      this.upStatus = false;
      this.$myRequest
        .get("/mob/home/getHouseInfo", {
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          orderSort: this.orderSort,
          userType: this.userType,
          type: this.type,
          region: this.region,
          price: this.price,
          area: this.area,
          floor: this.floor,
          transactionType: "1",
          upStatus: 1,
          examineStatus: 2,
          houseType: this.houseType,
          isLz: "0",
        })
        .then((res) => {
          if (!res.list.length) {
            this.downStatus = false;
          }
          this.upStatus = true;
          this.trigger = false;
          res.list.forEach((el) => {
            if (el.house_image) {
              el.house_image = el.house_image.split("|")[0];
            }
            if (el.hasOwnProperty("FLOOR")) {
              if (el.FLOOR.indexOf("|") != -1) {
                el.FLOOR =
                  el.FLOOR.split("|")[0] + "层/共" + el.FLOOR.split("|")[1] + "层";
              } else {
                el.FLOOR = "";
              }
            }
          });
          this.Recommend = this.Recommend.concat(res.list);
          uni.stopPullDownRefresh();
          // this.userInfo = res.userInfo;
          // uni.setStorageSync("Pduser", res.userInfo);
        });
    },
    hideModal(e) {
      this.modalName = null;
    },
    external() {
      this.modalName = null;
    },
    fanhui() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.tittit {
  position: fixed;
  top: 0;
  right: 0;
  background-color: #f8f8f8;
  z-index: 9999;
  max-width: 100%;
  width: 600rpx;
  transition-duration: 0.3s;
  transform: translateX(100%);

  text-align: center;
  line-height: 80rpx;
  font-size: 30rpx;
  border-bottom: 2rpx solid #cccccc;

  view {
    position: absolute;
    top: 0rpx;
    left: 20rpx;
    color: #999999;
    font-size: 54rpx;
    font-weight: 100;
  }
}
.show .tittit {
  transform: translateX(0%);
}
.cu-list {
  padding-bottom: calc(98rpx + env(safe-area-inset-bottom) / 2);

  .tit {
    position: relative;
    width: 100%;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 30rpx;
    border-bottom: 2rpx solid #cccccc;

    view {
      position: absolute;
      top: 0rpx;
      left: 20rpx;
      color: #999999;
      font-size: 54rpx;
      font-weight: 100;
    }
  }

  .leibie {
    margin-top: 40rpx;
    font-size: 28rpx;
    margin-left: 40rpx;

    .list {
      width: 100%;
      margin-top: 24rpx;

      .li {
        display: inline-block;
        text-align: center;
        width: 154rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #f2f2f2;
        border-radius: 30rpx;
        margin-right: 24rpx;
        margin-bottom: 24rpx;
      }

      .xuan {
        background: #64b6a8;
        color: #fff;
      }
    }
  }

  .quyu {
    margin-top: 40rpx;
    font-size: 28rpx;
    margin-left: 40rpx;

    .list {
      width: 100%;
      margin-top: 24rpx;

      .li {
        display: inline-block;
        text-align: center;
        width: 154rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #f2f2f2;
        border-radius: 30rpx;
        margin-right: 24rpx;
        margin-bottom: 24rpx;
      }

      .xuan {
        background: #64b6a8;
        color: #fff;
      }
    }
  }

  .jiage {
    margin-top: 40rpx;
    font-size: 28rpx;
    margin-left: 40rpx;

    .list {
      width: 100%;
      margin-top: 24rpx;

      .li {
        display: inline-block;
        text-align: center;
        width: 214rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #f2f2f2;
        border-radius: 30rpx;
        margin-right: 24rpx;
        margin-bottom: 24rpx;
      }

      .xuan {
        background: #64b6a8;
        color: #fff;
      }
    }
  }

  .mianji {
    margin-top: 40rpx;
    font-size: 28rpx;
    margin-left: 40rpx;

    .list {
      width: 100%;
      margin-top: 24rpx;

      .li {
        display: inline-block;
        text-align: center;
        width: 214rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #f2f2f2;
        border-radius: 30rpx;
        margin-right: 24rpx;
        margin-bottom: 24rpx;
      }

      .xuan {
        background: #64b6a8;
        color: #fff;
      }
    }
  }

  .loucen {
    margin-top: 40rpx;
    font-size: 28rpx;
    margin-left: 40rpx;

    .list {
      width: 100%;
      margin-top: 24rpx;

      .li {
        display: inline-block;
        text-align: center;
        width: 154rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #f2f2f2;
        border-radius: 30rpx;
        margin-right: 24rpx;
        margin-bottom: 24rpx;
      }

      .xuan {
        background: #64b6a8;
        color: #fff;
      }
    }
  }
}

.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99999;
}

.box {
  width: 100%;
  background-color: #fff;
}

.tou {
  position: relative;
  width: 100%;
  // height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #64b6a8;
  /* #ifdef MP-WEIXIN */
  text-align: left;
  display: flex;
  align-items: center;
  /* #endif */

  .image1 {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    // top: 116rpx;
    left: 30rpx;
  }

  .image2 {
    position: absolute;
    width: 56rpx;
    height: 56rpx;
    bottom: 16rpx !important;
    // top: 116rpx;
    right: 30rpx;
    /* #ifdef MP-WEIXIN */
    position: initial;
    margin-left: auto;
    margin-right: 200rpx;
    /* #endif */
  }
}

.tit_list {
  padding: 32rpx 30rpx calc(env(safe-area-inset-bottom) / 2);

  .tit {
    position: relative;
    margin-bottom: 32rpx;

    .view {
      display: inline-block;
      width: 120rpx;
      height: 58rpx;
      border-radius: 8rpx;
      text-align: center;
      line-height: 58rpx;
      color: #333;
      background-color: #f2f2f2;
      margin-right: 24rpx;
      font-size: 32rpx;
    }

    .xuan {
      background-color: #64b6a8;
      color: #fff;
    }

    .sai {
      position: absolute;
      font-size: 32rpx;
      top: 4rpx;
      right: 30rpx;

      span {
        margin-left: 8rpx;
        font-size: 20rpx;
      }
    }
  }

  .li {
    display: flex;
    align-items: center;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 2rpx solid #e0e0e0;

    image {
      background-color: #f8f8f8;

      width: 300rpx;
      height: 200rpx;
      border-radius: 20rpx;
    }

    .li_1 {
      margin-left: 24rpx;
      height: 200rpx;

      .tits {
        width: 366rpx;
        font-size: 32rpx;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //想要的行数
        -webkit-box-orient: vertical;
      }

      .neirong_1 {
        width: 366rpx;
        font-size: 24rpx;
        color: #666666;
        display: flex;
        align-items: center;
        .price {
          color: red;
          font-size: 30rpx;
          font-weight: 600;
        }
        .neir_css {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1; //想要的行数
          -webkit-box-orient: vertical;
        }
        .neir_css:nth-child(2n) {
          margin-left: 10rpx;
        }
        .neir_css:nth-child(2n-1) {
          margin-right: 10rpx;
        }
      }
    }
  }

  .li:last-child {
    border-bottom: 0rpx solid #e0e0e0;
  }
}

.hui {
  position: fixed;
  right: 30rpx;
  bottom: 154rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  background-color: #fff;
  border-radius: 34rpx;
  font-size: 26rpx;
  box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

  image {
    width: 46rpx;
    height: 46rpx;
    margin-right: 18rpx;
  }
}

.cu-dialog {
  max-width: 100%;
  width: 600rpx;
}

.basis-lg {
  flex-basis: 600rpx;
  overflow: auto;
}
.pop-scroll {
  position: relative;
}
.di {
  position: absolute;
  transform: translateY(0rpx);
  width: 100%;
  bottom: 0;
  left: 74rpx;

  .div {
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    height: calc(env(safe-area-inset-bottom) / 2 + 98rpx);
    display: inline-block;
    width: 300rpx;
    text-align: center;
    line-height: 98rpx;
    font-size: 30rpx;
  }

  .l {
    background: #e0e0e0;
  }

  .r {
    background: #64b6a8;
    color: #fff;
  }
}

.scroll-view {
  height: calc(100% - 58rpx - 24rpx);
}

.down {
  height: 60rpx;
  line-height: 60rpx;
  // border-top: 2rpx solid #d0d0d0;
  text-align: center;
}

.none {
  text-align: center;

  image {
    width: 430rpx;
    margin-bottom: 16rpx;
  }

  view {
    height: 40rpx;
    line-height: 40rpx;
    color: #666;
  }
}
</style>
